<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(link)"/>
<body>
<div id="app" class="ok-body" v-cloak>
    <!--模糊搜索区域-->
    <template>
        <div style="margin-bottom: 8px;margin-top: 8px;">
<!--            <i-input placeholder="输入车牌号"  v-model="entity.description"  style="width: 150px"></i-input>-->
            <!--            <i-select @on-change="listParkManage" placeholder="请选择合作单位" v-model="entity.orgId" style="width:150px">-->
            <!--                <i-option v-for="item in orgList" :value="item.orgId" :key="item.orgId">{{ item.name }}</i-option>-->
            <!--            </i-select>-->
<!--            <i-select placeholder="请选择停车场" v-model="entity.parkId" style="width:150px">-->
<!--                <i-option   v-for="item in parkList" :value="item.parkId" :key="item.parkId">{{ item.name }}</i-option>-->
<!--            </i-select>-->
<!--            <Date-Picker placeholder="请选择进场时间" v-model="entity.beginTime" type="date" format="yyyy-MM-dd HH:mm" style="width: 150px"></Date-Picker>-->
<!--            <Date-Picker placeholder="请选择出场时间" v-model="entity.endTime" type="date" format="yyyy-MM-dd HH:mm" style="width: 150px"></Date-Picker>-->
<!--            <i-button type="primary"  icon="ios-search" @click="load()">搜索</i-button>-->
<!--            <i-button type="primary"  icon="ios-redo" @click="reload()" >重置</i-button>-->
        </div>
    </template>
    <template>
        <i-table size="small" :columns="tableTitle"  :data="tableData">
            <!--            <template slot-scope="tableScope" slot="action">-->
            <!--                <i-button type="primary" size="small" icon="md-create" ghost class="table-btn" @click="edit(tableScope.row)">修改</i-button>-->
            <!--                <i-button type="primary" size="small" icon="md-trash" ghost class="table-btn" @click="remove(tableScope.row)">删除</i-button>-->
            <!--            </template>-->
        </i-table>
        <br>
        <Page  style="float: right;" :current="entity.pageNo" :total="tableSize" :page-size="entity.pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
    layui.use(["okUtils", "okLayer"], function () {
        var okUtils = layui.okUtils;
        var okLayer = layui.okLayer;
        var vm = new Vue({
            el: '#app',
            data: function(){
                var that = this;
                return {
                    tableTitle : [{
                        title: '序号',
                        width : 200,
                        render: function(h, params) {
                            return h('span', params.index + (that.entity.pageNo- 1) * that.entity.pageSize + 1);
                        }
                    },{
                        key : "spaceId",
                        title : "停车地点",
                        minWidth:200
                    },{
                        key : "plateNumber",
                        title : "车牌号",
                        minWidth:150
                    },{
                        key : "type",
                        title : "类型",
                        minWidth : 120,
                        render: function(h, params) {
                            var name = "临时车";
                            if(params.row.type==0){
                                name = '包月车';
                            }else if(params.row.type==1){
                                name = 'VIP免费车';
                            }
                            return h('span', name);
                        }
                    },{
                        key : "gmtInto",
                        title : "入场时间",
                        minWidth:200
                    } ],
                    tableData : [],
                    entity : {
                        pageSize : 10,
                        pageNo : 1,
                        description:'',
                        orgId:null
                    },
                    tableSize : 50,
                    orgList:[],
                    parkList:[]
                }
            },
            methods: {
                load : function() {
                    var that = this;
                    okUtils.ajaxCloud({
                        url:"/app/parkStatus/list",
                        param : that.entity,
                        success : function(result) {
                            that.tableData = result.msg.records;
                            that.tableSize = result.msg.totalCount;
                        }
                    });
                },
                // listOrg : function() {
                //     var that = this;
                //     okUtils.ajaxCloud({
                //         url:"/sys/org/select",
                //         success : function(result) {
                //              that.orgList = result.msg;
                //         }
                //     });
                // },
                listParkManage : function() {
                    var that = this;
                    okUtils.ajaxCloud({
                        url:"/app/park/selectByUser",
                        // param : {'orgId':vm.entity.orgId},
                        success : function(result) {
                            that.parkList = result.msg;
                        }
                    });
                },
                reload : function(){
                    vm.entity.pageSize = 10;
                    vm.entity.pageNo = 1;
                    vm.entity.description = '';
                    vm.entity.orgId = null;
                    vm.entity.parkId = null;
                    vm.entity.beginTime = null;
                    vm.entity.endTime = null;
                    this.load();
                },
                changePage : function(pageNo) {
                    vm.entity.pageNo = pageNo;
                    vm.load();
                },
                changePageSize : function(pageSize) {
                    vm.entity.pageSize = pageSize;
                    vm.load();
                },
                edit : function(entity) {
                    okUtils.dialogOpen({
                        title: '修改',
                        url: "car/carManage/form.html",
                        scroll : true,
                        width: '50%',
                        height: '95%',
                        success : function(dialog) {
                            dialog.vm.entity.id = entity.id;
                            dialog.vm.load();
                        },
                        yes : function(dialog) {
                            dialog.vm.acceptClick(vm);
                        }
                    });
                },
                add:function(){
                    okUtils.dialogOpen({
                        title: '新增',
                        url: "car/carManage/form.html",
                        scroll : true,
                        width: '50%',
                        height: '95%',
                        success : function(dialog) {
                            dialog.vm.load();
                        },
                        yes : function(dialog) {
                            dialog.vm.acceptClick(vm);
                        }
                    });
                },
                remove:function(entity) {
                    okLayer.confirm("确定要删除吗？", function () {
                        okUtils.ajaxCloud({
                            url:"/car/manage/delete",
                            param : {id: entity.id},
                            success : function(result) {
                                okLayer.msg.greenTick(result.msg);
                                vm.load();
                            }
                        });
                    })
                }
            },
            created: function() {
                this.load()
                // this.listParkManage();
            }
        })
    });
</script>
</body>
</html>
